<div class="row-fluid">
    <div id="content" class="row-fluid">
        <div class="box span12">
            <div class="box-header well">
                <h2>Nhóm tài khoản</h2>
            </div>
            
            <div class="box-content">
                
                <br />
                <div class="form-table">
                    <form action="" method="post" class="fr">
                        <div class="control-group <?php echo $this->alert_class;?>">
                            <div class="controls input-prepend">
        						<span class="add-on"><i class="icon-user"></i><i class="icon-user"></i></span><input class="input-medium required" name="TenNhom" type="text" placeholder="Tên nhóm" />
                                <input class="btn" type="submit" name="submit" value="Thêm" />
    					    </div>
                        </div>
                    </form>
                    <div class="ajax-loaders fl"></div>
                </div>
                <hr class="cb" />
                <div class="table-content">
                    <table class="table table-striped table-condensed">
                        <thead>
                            <tr>
                                <th style="width: 25px;">#</th>
                                <th>Tên nhóm</th>
                                <th style="width: 50px;"></th>
                            </tr>
                        </thead>
                        
                        <tbody>
                            
                        </tbody>
                        
                        <tfoot>
                            
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>	
</div>

<div id="modal-updategroup" class="modal hide fade" >
    <div class="modal-header">
        <h3 id="myModalLabel">Cập nhật nhóm</h3>
    </div>
    <div class="modal-body">
        <form class="form-horizontal" onsubmit="return update_group(this)" id="form_edit_group" name="form_edit_group" action="<?php echo $this->url(array('controller'=>'system','action'=>'group'))?>" method="post">
            <div class="alert alert-success fade in" style="display: none;">
                <strong>Thành công!</strong> Dữ liệu đã cập nhật.
            </div>
            <input type="hidden" value="" name="MaNhom" />
            <div class="control-group">
                <label class="control-label" for="TenNhom">Tên nhóm</label>
                <div class="controls">
                    <input type="text" value="" name="TenNhom" />
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Đóng</button>
        <button onclick="return update_group(form_edit_group)" class="btn btn-primary">Cập nhật</button>
    </div>
</div>


<script id="tmpl-tbody" type="text/x-tmpl">
{% for (var i=0; i<o.tbody.length; i++) { %}
    <tr id="group_{%=o.tbody[i].MaNhom%}">
        <td>{%=o.tbody[i].MaNhom%}</td>
        <td>{%=o.tbody[i].TenNhom%}</td>
        <td>
            <a href="#" onclick="return open_modal_edit({%=o.tbody[i].MaNhom%})" title="Sửa"><i class="icon icon-edit icon-blue"></i></a>
            <a href="#" onclick="return del_group({%=o.tbody[i].MaNhom%})" title="Xóa" class="fr"><i class="icon icon-trash icon-red"></i></a>
        </td>
    </tr>
{% } %}
</script>

<script>
$(function(){    
    // Onload
   var link = "<?php echo $this->url(array('controller'=>'system','action'=>'group'));?>";
   $(".ajax-loaders").show();
   $.post(link,{'ajax_action': 'ajaxLoad','sdata':null},function( rdata ){
        $(".ajax-loaders").hide();
        $(".table tbody").html( tmpl("tmpl-tbody", rdata) );
   },'json')
   
   // Form submit
    $(".form-table form").submit(function(){
        var error = false;
        $(this).find(".required").each(function(){
            if(this.value==""){
                $(this).parents(".control-group").addClass("error");
                error = true;
            }else{
                $(this).parents(".control-group").removeClass("error");
            }
        });
            
        if(error==false){
            var sdata = {'TenNhom':this.TenNhom.value};
            $(this).parents(".control-group").removeClass("error");
            $(".ajax-loaders").show();
            $.post(this.action,{ 'ajax_action':'ajaxInsert','sdata': sdata },function(rdata){
                $(".ajax-loaders").hide();            
                $(".table tbody").html( tmpl("tmpl-tbody", rdata) );
            },'json');
        }
        return false;
    });
});

/* Xoa nhom */
function del_group(id_group){
    if(confirm("Bạn có chắc muốn xóa nhóm này không?")) {
       var link = "<?php echo $this->url(array('controller'=>'system','action'=>'group'));?>";
       var sdata = {'MaNhom': id_group};
       $(".ajax-loaders").show();
       $.post(link,{ 'ajax_action': 'ajaxDelete','sdata': sdata },function( rdata ){
            $(".ajax-loaders").hide();
            $(".table tbody").html( tmpl("tmpl-tbody", rdata) );
       },'json');
   }
   return false;
}

/* Sua nhom */
function open_modal_edit(id_group){   
   var tennhom = $("tr#group_"+id_group+" td:eq(1)").text();   
   $("#modal-updategroup").find("input[name='MaNhom']").val(id_group);
   $("#modal-updategroup").find("input[name='TenNhom']").val(tennhom);
   $('#modal-updategroup').modal();
   return false;
}

/* Cap nhat nhom tai khoan */
function update_group(form){
    if(form.TenNhom.value!="") { 
        var sdata = {'MaNhom':form.MaNhom.value,'TenNhom':form.TenNhom.value};
        $(".ajax-loaders").show();
        $(form).find(".alert").hide();
        $.post(form.action,{ 'ajax_action': 'ajaxEdit','sdata':sdata },function( rdata ){
            $(".ajax-loaders").hide();
            $(".table tbody").html( tmpl("tmpl-tbody", rdata) );
            $("input[name='TenNhom']").parents(".control-group").removeClass("error");
            $(form).find(".alert").show().fadeOut(10000);
        },'json')
   }else{
        $("input[name='TenNhom']").parents(".control-group").addClass("error");
   }
   return false;
}
</script>